<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content (ionScroll)="onScroll()">

    <div #IndexedMenu [hidden]="!getOk" class="indexed-menu">
        <div class="indexed-item"
             [class.activate]="item === index"
             *ngFor="let item of indexes;let i = index"
             tappable
             (click)="selectIndex(i)">
            {{ item }}
        </div>
    </div>

    <ion-list #scheduleList>
        <ion-item-group *ngFor="let item of contacts" #IonItemGroup>

            <ion-item-divider sticky index-key="item.belong">
                <ion-label>
                    {{item.groupName}}
                </ion-label>
            </ion-item-divider>

            <ion-item-sliding *ngFor="let i of item.contacts" #slidingItem>
                <ion-item>
                    {{ i.displayName + ' ' + i.name }}
                </ion-item>
                <ion-item-options side="right">
                    <button ion-button (click)="unread(item)">Unread</button>
                </ion-item-options>
            </ion-item-sliding>

        </ion-item-group>
    </ion-list>

    <div class="modal"
         [class.show]="showModal">
        {{index}}
    </div>

</ion-content>
